<template>
  <div class="changelog">
    <div class="bg-dark text-white font-sans">
      <!-- 进度条 -->
      <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
        <div class="progress-line" :style="{ width: progress + '%' }"></div>
      </div>

      <!-- 日志Hero区域 -->
      <section class="relative pt-24 pb-16 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">更新日志</h1>
            <p class="text-gray-400 max-w-2xl mx-auto">
              查看狂速科技SAAS平台的最新功能更新和优化内容
            </p>
          </div>

          <!-- 筛选器 -->
          <div class="max-w-3xl mx-auto flex flex-wrap justify-center gap-4 mb-12">
            <button class="px-6 py-2 rounded-full bg-primary text-white text-sm font-medium">全部</button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              功能新增
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              性能优化
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              问题修复
            </button>
            <button
                class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors">
              界面更新
            </button>
          </div>
        </div>
      </section>

      <!-- 更新日志内容区域 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="max-w-5xl mx-auto">
            <!-- 时间线 -->
            <div class="relative">
              <!-- 时间线中间线 -->
              <div class="timeline-line"></div>

              <!-- 版本迭代 -->
              <div v-for="(version, index) in versions" :key="index" class="timeline-item mb-20 relative">
                <div class="timeline-dot" style="top: 0;"></div>
                <div class="flex flex-col md:flex-row items-center justify-between mb-4">
                  <div class="bg-primary/10 text-primary px-4 py-1 rounded-full text-sm font-medium">
                    {{ version.date }}
                  </div>
                  <div class="bg-card px-4 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">
                    版本 {{ version.versionNumber }}
                  </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                  <div class="bg-card rounded-xl p-6 hover-lift">
                    <h3 class="text-xl font-bold mb-4">新增功能</h3>
                    <ul class="space-y-3">
                      <li v-for="(feature, featureIndex) in version.newFeatures" :key="featureIndex"
                          class="flex items-start">
                        <div class="feature-badge badge-new">新增</div>
                        <span>{{ feature }}</span>
                      </li>
                    </ul>
                  </div>

                  <div class="bg-card rounded-xl p-6 hover-lift">
                    <h3 class="text-xl font-bold mb-4">优化与修复</h3>
                    <ul class="space-y-3">
                      <li v-for="(optimization, optIndex) in version.optimizations" :key="optIndex"
                          class="flex items-start">
                        <div class="feature-badge" :class="optimization.type">{{ optimization.label }}</div>
                        <span>{{ optimization.content }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  layout: "default",
  name: 'ChangelogView',
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0,
      versions: [
        {
          date: '2025-05-15',
          versionNumber: '2.5.0',
          newFeatures: [
            '支持抖音小程序部署，拓展营销渠道',
            '数据分析模块新增用户留存分析功能，帮助商家了解用户粘性',
            '营销工具中添加"限时折扣"功能，支持设置多时段促销活动',
            '订单管理支持批量发货和打印快递单功能'
          ],
          optimizations: [
            {type: 'badge-improvement', label: '优化', content: '可视化编辑器性能优化，组件拖拽更加流畅'},
            {type: 'badge-improvement', label: '优化', content: '支付流程体验优化，减少用户支付环节操作'},
            {type: 'badge-fix', label: '修复', content: '修复了在部分机型上小程序分享卡片显示异常的问题'},
            {type: 'badge-fix', label: '修复', content: '修复了优惠券领取后可能无法正常使用的问题'}
          ]
        },
        {
          date: '2025-04-28',
          versionNumber: '2.4.1',
          newFeatures: [
            '商品管理支持导入导出功能，方便批量操作',
            '用户管理模块添加"用户分组"功能，支持精准营销'
          ],
          optimizations: [
            {type: 'badge-improvement', label: '优化', content: '小程序加载速度优化，首屏加载时间缩短30%'},
            {type: 'badge-improvement', label: '优化', content: '订单详情页面UI优化，信息展示更加清晰'},
            {type: 'badge-fix', label: '修复', content: '修复了在低版本微信中部分组件显示异常的问题'},
            {type: 'badge-fix', label: '修复', content: '修复了会员积分计算错误的问题'}
          ]
        },
        {
          date: '2025-04-10',
          versionNumber: '2.4.0',
          newFeatures: [
            '添加"直播带货"功能，支持小程序内直播',
            '数据分析模块新增"漏斗分析"功能，优化转化路径',
            '营销工具中添加"会员等级"功能，提升用户粘性'
          ],
          optimizations: [
            {type: 'badge-improvement', label: '优化', content: '服务器性能优化，系统响应速度提升40%'},
            {type: 'badge-improvement', label: '优化', content: '移动端界面优化，提升触控体验'},
            {type: 'badge-fix', label: '修复', content: '修复了在某些情况下订单支付成功但状态未更新的问题'}
          ]
        },
        {
          date: '2025-03-25',
          versionNumber: '2.3.0',
          newFeatures: [
            '添加"支付宝小程序"支持，拓展多平台覆盖',
            '营销工具中添加"裂变分销"功能，支持多级分销模式',
            '添加"门店自提"配送方式，支持线下门店管理'
          ],
          optimizations: [
            // 此处可继续补充该版本的优化与修复内容
          ]
        }
      ]
    };
  },
  mounted() {
    window.addEventListener('scroll', this.updateProgress);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.updateProgress);
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgress() {
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    }
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }

  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }

  .timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, #48b6ff, #2e6cf1);
    transform: translateX(-50%);
  }

  .timeline-dot {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
    transform: translateX(-50%);
  }

  .feature-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
  }

  .badge-new {
    background-color: rgba(72, 182, 255, 0.2);
    color: #48b6ff;
  }

  .badge-improvement {
    background-color: rgba(52, 199, 89, 0.2);
    color: #34c759;
  }

  .badge-fix {
    background-color: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
  }

  .badge-enhancement {
    background-color: rgba(255, 149, 0, 0.2);
    color: #ff9500;
  }
}

:root {
  --primary: #48b6ff;
  --secondary: #2e6cf1;
  --dark: #080812;
  --darker: #04040a;
  --card: #1a1a31;
}

body {
  background-color: var(--dark);
  color: white;
  font-family: 'Segoe UI', sans-serif;
}
</style>
